<template>
	<view>
		<uni-popup ref="send" type="center" :isMaskClick="false">
			<view class="flex flex-y flex-x-y">
				<view
					style="width: 504rpx;height: 524rpx;background:url(../../static/zhoudao/coupon-bg.png) left top / 100% 100% no-repeat;">

					<view class="flex flex-x-y fs-32 color-333333" style="margin-top: 38rpx;line-height: 44rpx;">
						赠送优惠券
					</view>

					<view class="flex flex-x-y fs-26 color-666666" style="margin-top: 90rpx;line-height: 36rpx;">
						请输入对方的手机号
					</view>

					<view class="flex flex-x-y">
						<input type="number" maxlength="11" v-model="mobile" :adjust-position="false"
							:auto-focus="true" class="send-input" />
					</view>

					<view class="flex flex-x-y">
						<view @tap.stop="send" class="send-btn-3 bg-all">确认赠送</view>
					</view>

				</view>
				<view @click="close" class="iconfont icon-guanbi1"
					style="font-size: 60rpx;color: #FFFFFF;margin-top: 60rpx;"></view>
			</view>
		</uni-popup>

	
		<!-- 赠送成功 -->
		<uni-popup ref="success" type="center">
			<view class="success-box">
				<view class="iconfont icon-xuanzhong color" style="font-size: 80rpx;line-height: 80rpx;"></view>
				<view class="fs-36 color-333333 mt-14">赠送成功</view>
				<view class="fs-24 color-999999" style="margin-top: 6rpx;">自动放入对方我的优惠券里</view>
				<view class="flex" style="margin-top: 36rpx;">
					<view class="success-btn-back" @tap.stop="toPage('/pages/find/find','switch')">回到首页</view>
					<view class="success-btn-back-1 ml-24" @tap.stop="send_again">继续赠送</view>
				</view>
			</view>
		</uni-popup>
		<!-- 赠送成功 -->
		<!-- 赠送失败 -->
		<uni-popup ref="fail" type="center">
			<view class="success-box">
				<view class="iconfont icon-guanbi- color" style="font-size: 80rpx;line-height: 80rpx;color: #FC543B;">
				</view>
				<view class="fs-36 color-333333 mt-14">赠送失败</view>
				<view class="fs-24 color-999999" style="margin-top: 6rpx;">查看电话号码是否有误</view>
				<view class="flex" style="margin-top: 36rpx;">
					<view class="success-btn-back" @tap.stop="toPage('/pages/find/find','switch')">回到首页</view>
					<view class="success-btn-back-2 ml-24" @tap.stop="send_again">重新赠送</view>
				</view>
			</view>
		</uni-popup>
		<!-- 赠送失败 -->
	</view>
</template>

<script>
	export default {
		name: "send-yhq",
		data() {
			return {
				mobile: '',
				info: null,
			};
		},
		mounted() {
			// this.$refs.fail.open();
		},
		methods: {
			open(info) {
				this.info = info;
				this.$refs.send.open();
			},
			close() {
				this.$refs.send.close();
			},
			send() {
				// this.close();
				// this.$emit('send', this.mobile);
				if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					this.showToast("请输入正确的电话号码");
					return;
				}
				this.request({
					url: '/userCoupon/give',
					data: {
						id: this.info.id,
						phone: this.mobile
					},
					toast: false,
					method: 'POST'
				}).then(res => {
					if (res.status == 200) {
						this.close();
						this.$refs.success.open();
						this.$emit('send');
					} else {
						this.close();
						this.$refs.fail.open();
					}
				});
			},
			send_again() {
				this.$refs.fail.close();
				this.$refs.success.close();
				this.$refs.send.open();
			}
		}
	}
</script>

<style>
	.send-input {
		height: 72rpx;
		margin-top: 22rpx;
		width: 256rpx;
		color: #333333;
		font-size: 28rpx;
		border-bottom: 1rpx solid rgba(72, 217, 208, 0.5);
		text-align: left;
	}

	.send-btn-3 {
		width: 200rpx;
		height: 72rpx;
		border-radius: 36rpx;
		color: #333;
		font-size: 28rpx;
		margin-top: 40rpx;
		line-height: 72rpx;
	}

	.success-box {
		width: 456rpx;
		height: 384rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		background: linear-gradient(180deg, #f0f7f7 54%, #dbfcfa 100%)
	}

	.success-btn-back {
		width: 160rpx;
		height: 68rpx;
		line-height: 68rpx;
		color: #333;
		font-size: 28rpx;
		border: 1rpx solid #979797;
		border-radius: 35rpx;
	}

	.success-btn-back-1 {
		width: 160rpx;
		height: 68rpx;
		line-height: 68rpx;
		color: #07ABA1;
		font-size: 28rpx;
		border: 1rpx solid #07ABA1;
		border-radius: 35rpx;

	}

	.success-btn-back-2 {
		width: 160rpx;
		height: 68rpx;
		line-height: 68rpx;
		color: #FC543B;
		font-size: 28rpx;
		border: 1rpx solid #FC543B;
		border-radius: 35rpx;

	}
</style>
